<!--
    Exception 敏感节点日历
    @Author: linxp    
    @Date: 2020-12-23
-->
<template>
    <div class="mgjd sensitive-node">
        <div class="sensitive-node__calendar">
            <dg-calendar class="calendar" v-model="value" ref="calendar">
                <template slot="header">
                    <div class="calendar__header">
                        <span @click="handlePrevYear">
                            <i class="el-icon-d-arrow-left"></i>
                        </span>
                        <span @click="handlePrevMonth">
                            <i class="el-icon-arrow-left"></i>
                        </span>
                        <span>{{ nowMonth }}</span>
                        <span @click="handleNextMonth">
                            <i class="el-icon-arrow-right"></i>
                        </span>
                        <span @click="handleNextYear">
                            <i class="el-icon-d-arrow-right"></i>
                        </span>
                    </div>
                </template>
                <template slot="dateCell" slot-scope="{ data }">
                    <div
                        :class="[
                            data.isSelected && 'is-selected',
                            eventDays.some((item) => item.dates.includes(data.day)) && 'sensitive-node__day',
                            activeDates.indexOf(data.day) > -1 && 'sensitive-node__nodeday',
                            activeDates.indexOf(data.day) === 0 && 'first',
                            activeDates.indexOf(data.day) === activeDates.length - 1 && 'last'
                        ]"
                    >
                        <!-- eventDays.some((item) => item.dates.indexOf(data.day) < item.dates.length - 1 && item.dates.indexOf(data.day) >= 0 ) && 'middle' -->
                        {{ data.day | filterTime }}
                        <!-- <p class="lunar-text">{{ data.day | getLunarDay }}</p> -->
                        <span v-html="getSelecteNumber(data.day)"></span>
                    </div>
                </template>
            </dg-calendar>
        </div>
        <div class="sensitive-node__footer">
            <span class="sensitive-node__status">敏感日期</span>
            <span class="sensitive-node__status--today">今日</span>
            <dg-button type="text" @click="showAdd = true">
                <i class="el-icon-plus" style="padding-right: 4px"></i>新增
            </dg-button>
        </div>
        <el-collapse style="margin-top: 1rem">
            <el-collapse-item title="敏感节点" name="1">
                <div
                    class="sensitive-node__item"
                    style="padding-right: 4rem"
                    :class="activeIndex === index ? 'active' : ''"
                    v-for="(item, index) in eventDays"
                    :key="index"
                    @click="handleChooseNode(index, item)"
                >
                    <span>{{ item.dates | getNodeDay }}</span>
                    <span>{{ item.node }}</span>
                    <div class="sensitive-node__icon__box">
                        <i :class="item.editorIcon"></i>
                        <i :class="item.delIcon"></i>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>

        <!--新增敏感节点弹窗-->
        <dg-dialog title="新增敏感节点" :visible.sync="showAdd" width="500px">
            <el-form ref="refForm" style="width: 100%" label-width="80px" :model="newForm">
                <el-form-item label="时间:" prop="time">
                    <dg-date-picker
                        v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                    ></dg-date-picker>
                </el-form-item>
                <el-form-item label="节点名称:" prop="nodeName">
                    <dg-input v-model="nodeName" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAdd = false">取 消</el-button>
                <el-button type="primary" @click="handleAddDate">确 定</el-button>
            </span>
        </dg-dialog>
    </div>
</template>
<script>
export default {
    name: "sensitive-node",
    props: {},
    data() {
        const date = new Date();
        return {
            // 当前日期
            value: date,
            // 敏感节点日期
            eventDays: [
                {
                    node: "这是1个测试节点",
                    dates: ["2021-04-13", "2021-04-14", "2021-04-15"],
                    editorIcon: "el-icon-edit",
                    delIcon: "el-icon-delete"
                },
                {
                    node: "这是2个测试节点",
                    dates: ["2021-04-27", "2021-04-28"],
                    editorIcon: "el-icon-edit",
                    delIcon: "el-icon-delete"
                }
            ],
            activeIndex: null,
            activeDates: [],
            year: date.getFullYear(),
            month: date.getMonth() + 1,
            showAdd: false,
            newForm: {
                time: "",
                nodeName: ""
            }
        };
    },
    watch: {},
    computed: {
        nowMonth() {
            const { month, year } = this;
            return year + "年" + month + "月";
        }
    },
    filters: {
        filterTime(val) {
            return val.split("-")[2];
        },
        // 阴历
        getLunarDay(solarDay) {
            const madd = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
            const numString = "一二三四五六七八九十";
            const monString = "正二三四五六七八九十冬腊";
            const CalendarData = [
                0xa4b,
                0x5164b,
                0x6a5,
                0x6d4,
                0x415b5,
                0x2b6,
                0x957,
                0x2092f,
                0x497,
                0x60c96,
                0xd4a,
                0xea5,
                0x50da9,
                0x5ad,
                0x2b6,
                0x3126e,
                0x92e,
                0x7192d,
                0xc95,
                0xd4a,
                0x61b4a,
                0xb55,
                0x56a,
                0x4155b,
                0x25d,
                0x92d,
                0x2192b,
                0xa95,
                0x71695,
                0x6ca,
                0xb55,
                0x50ab5,
                0x4da,
                0xa5b,
                0x30a57,
                0x52b,
                0x8152a,
                0xe95,
                0x6aa,
                0x615aa,
                0xab5,
                0x4b6,
                0x414ae,
                0xa57,
                0x526,
                0x31d26,
                0xd95,
                0x70b55,
                0x56a,
                0x96d,
                0x5095d,
                0x4ad,
                0xa4d,
                0x41a4d,
                0xd25,
                0x81aa5,
                0xb54,
                0xb6a,
                0x612da,
                0x95b,
                0x49b,
                0x41497,
                0xa4b,
                0xa164b,
                0x6a5,
                0x6d4,
                0x615b4,
                0xab6,
                0x957,
                0x5092f,
                0x497,
                0x64b,
                0x30d4a,
                0xea5,
                0x80d65,
                0x5ac,
                0xab6,
                0x5126d,
                0x92e,
                0xc96,
                0x41a95,
                0xd4a,
                0xda5,
                0x20b55,
                0x56a,
                0x7155b,
                0x25d,
                0x92d,
                0x5192b,
                0xa95,
                0xb4a,
                0x416aa,
                0xad5,
                0x90ab5,
                0x4ba,
                0xa5b,
                0x60a57,
                0x52b,
                0xa93,
                0x40e95
            ];
            let solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
            let TheDate = new Date(solarDay);
            let total, m, n, k;
            let isEnd = false;
            let theDateYear = TheDate.getFullYear();
            // 阴历处理事件
            let getBit = function (m, n) {
                return 29 + ((m >> n) & 1);
            };
            total =
                (theDateYear - 1921) * 365 +
                Math.floor((theDateYear - 1921) / 4) +
                madd[TheDate.getMonth()] +
                TheDate.getDate() -
                38;
            if (theDateYear % 4 === 0 && TheDate.getMonth() > 1) {
                total++;
            }
            for (m = 0; ; m++) {
                k = CalendarData[m] < 0xfff ? 11 : 12;
                for (n = k; n >= 0; n--) {
                    if (total <= getBit(CalendarData[m], n)) {
                        isEnd = true;
                        break;
                    }
                    total = total - getBit(CalendarData[m], n);
                }
                if (isEnd) {
                    break;
                }
            }
            let cMonth, cDay;
            cMonth = k - n + 1;
            cDay = total;
            if (k === 12) {
                if (cMonth === Math.floor(CalendarData[m] / 0x10000) + 1) {
                    cMonth = 1 - cMonth;
                }
                if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
                    cMonth--;
                }
            }
            let cDayStr = numString.charAt(cDay - 1);
            if (cDay % 10 !== 0 || cDay === 10) {
                cDayStr = numString.charAt((cDay - 1) % 10);
            }
            //农历传统节日
            if (cMonth == 1 && cDay == 1) {
                return "春节";
            } else if (cMonth == 1 && cDay == 15) {
                return "元宵节";
            } else if (cMonth == 2 && cDay == 2) {
                return "龙抬头";
            } else if (cMonth == 5 && cDay == 5) {
                return "端午";
            } else if (cMonth == 7) {
                if (cDay == 7) return "七夕";
                if (cDay == 15) return "中元节";
            } else if (cMonth == 8 && cDay == 15) {
                return "中秋";
            } else if (cMonth == 9 && cDay == 9) {
                return "重阳";
            } else if (cMonth == 10 && cDay == 15) {
                return "下元节";
            } else if (cMonth == 12) {
                if (cDay == 8) return "腊八";
                if (cDay == 23) return "小年";
            }
            return cDay === 1
                ? monString.charAt(cMonth - 1) + "月"
                : (cDay < 11 ? "初" : cDay < 20 ? "十" : cDay < 30 ? "廿" : "三十") + cDayStr;
        },
        // 节点日期转中文
        getNodeDay(days) {
            let y1, y2, m1, m2, d1, d2;
            let TheDate1 = new Date(days[0]);
            // 第一天
            y1 = TheDate1.getFullYear();
            m1 = TheDate1.getMonth() + 1;
            d1 = TheDate1.getDate();
            // 最后一天
            d2 = new Date(days[days.length - 1]).getDate();
            days.map((item) => {
                let TheDate = new Date(item);
                let y = TheDate.getFullYear();
                let m = TheDate.getMonth() + 1;
                y2 = y1 === y ? "" : y;
                m2 = m1 === m ? "" : m;
            });
            let Y = y2 !== "" ? "年" : "";
            let M = m2 !== "" ? "月" : "";
            return y1 + "年" + m1 + "月" + d1 + "日-" + y2 + Y + m2 + M + d2 + "日";
        }
    },
    methods: {
        /**
         * 新增敏感节点
         */
        handleAddDate() {
            const { time, nodeName } = this;
            if (!time) {
                this.$message({
                    showClose: true,
                    message: "请选择时间",
                    type: "warning"
                });
                return;
            }
            if (!nodeName) {
                this.$message({
                    showClose: true,
                    message: "请输入节点名称",
                    type: "warning"
                });
                return;
            }
            // 获取所选日期区间所有日期
            const evnets = this.getBetweenDate(time[0], time[1]);
            this.eventDays.push({
                node: nodeName,
                dates: evnets
            });
            this.$message({
                showClose: true,
                message: "添加成功",
                type: "success"
            });

            this.showAdd = false;
        },

        /**
         * 去年
         */

        handlePrevYear() {
            this.year--;
            this.pickDay();
        },

        /**
         * 明年
         */
        handleNextYear() {
            this.year++;
            this.pickDay();
        },

        /**
         * 上个月
         */
        handlePrevMonth() {
            this.month--;
            if (this.month < 1) {
                this.month = 12;
                this.year--;
            }
            this.pickDay();
        },

        /**
         * 下个月
         */
        handleNextMonth() {
            this.month++;
            if (this.month > 12) {
                this.month = 1;
                this.year++;
            }
            this.pickDay();
        },

        /**
         * 设置日历年份月份
         */
        pickDay() {
            const { month, year } = this;
            this.$refs.calendar.pickDay(year + "-" + month);
        },

        /**
         * 获取两个日期中间所有日期
         * @param {string} startDate 开始日期
         * @param {string} endDate 结束日期
         * @returns {array} 区间日期
         */
        getBetweenDate(startDate, endDate) {
            //初始化日期列表，数组
            let lastDates = new Array();

            while (startDate <= endDate) {
                // 每次都往数组加第一项
                lastDates.push(startDate);
                // 获取开始日期时间戳
                let startDateValue = new Date(startDate).getTime();
                // 获取下一天的时间戳
                let nextDateValue = startDateValue + 24 * 60 * 60 * 1000;

                // 获取年月日
                let nextYear = new Date(nextDateValue).getFullYear() + "-";
                let nextMonth =
                    new Date(nextDateValue).getMonth() + 1 < 10
                        ? "0" + (new Date(nextDateValue).getMonth() + 1) + "-"
                        : new Date(nextDateValue).getMonth() + 1 + "-";
                let nextDay =
                    new Date(nextDateValue).getDate() < 10
                        ? "0" + new Date(nextDateValue).getDate()
                        : new Date(nextDateValue).getDate();

                // 付给开始时间循环判断
                startDate = nextYear + nextMonth + nextDay;
            }

            return lastDates;
        },

        /**
         * 获取是否有重叠日期
         * @param {string} day 某天
         */
        getSelecteNumber(day) {
            let num = 0;
            this.eventDays.some((item) => {
                if (item.dates.includes(day)) {
                    num++;
                }
            });
            if (num > 1) {
                return `<sup class="dot-box">${num}</sup>`;
            }
            return "";
        },

        /**
         * 切换节点
         * @param {number} index 当前点击
         * @param {array} node 当前点击的节点
         */
        handleChooseNode(index, node) {
            this.activeIndex = index;
            this.value = node.dates[0];
            this.activeDates = node.dates;
        }
    }
};
</script>
<style lang="scss" scoped>
.sensitive-node {
    // display: flex;
    // flex-direction: column;
    height: 100%;
    font-size: 1rem;
    &__calendar {
        // flex: 1;
        /deep/.el-calendar__body {
            padding: 0;
        }
        /deep/.el-calendar-table {
            td {
                border: none;
                &.is-today {
                    color: rgba($color: #fff, $alpha: 0.85);
                    &:hover {
                        color: rgba($color: #000000, $alpha: 0.85);
                    }
                    .el-calendar-day {
                        background-color: #4090ff;
                    }
                }
            }
            .el-calendar-day {
                display: block;
                height: 2rem;
                line-height: 1rem;
                text-align: center;
                padding: 0;
                border-radius: 3px;
                position: relative;
            }
            .el-calendar-day > div {
                width: 100%;
                height: 100%;
                padding: 8px;
                box-sizing: border-box;
                margin-top: 2px;
            }
        }
        /deep/.el-calendar__header {
            border-bottom: none;
        }
    }
    /deep/.dg-dialog__body {
        min-height: 0;
    }
    &__footer{
        display: flex;
        align-items: center;
        margin-top: 1rem;
        .dg-button{
            flex: auto;
            text-align: right;
            font-size: 1rem;
        }
    }
    &__status {
        display: inline-block;
        &::before {
            content: "";
            display: inline-block;
            width: 1.25rem;
            height: 3px;
            background-color: #f63842;
            border-radius: 2px;
            margin-right: 6px;
        }
    }
    &__status--today {
        display: inline-block;
        &::before {
            content: "";
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background-color: #4090ff;
            border-radius: 2px;
            margin: 0 5px 0 10px;
            vertical-align: middle;
        }
    }
    &__today {
        display: flex;
        align-items: center;
        &::before {
            content: "";
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background-color: #4090ff;
            border-radius: 4px;
            margin-right: 6px;
        }
    }
    &__day::after {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 5px;
        border-bottom: 2px solid #f63842;
    }
    .middle::before {
        content: "";
        position: absolute;
        width: 30px;
        bottom: -2px;
        border-bottom: 2px solid #f63842;
        right: -15px;
    }
    &__event {
        height: 9rem;
    }
    &__title {
        font-size: 14px;
    }
    &__item {
        position: relative;
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: rgba(0, 0, 0, 0.85);
        padding: 0.5rem 1rem;
        background-color: #f8fbff;
        cursor: pointer;
        span {
            padding-right: 1rem;
        }
        .sensitive-node__icon__box {
            display: none;
            position: absolute;
            right: 1rem;
            top: 0.5rem;
            i {
                color: #4090ff;
                margin-right: 3px;
            }
        }
        &.active,
        &:hover {
            .sensitive-node__icon__box {
                display: block;
            }
        }
        &-cont {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        &-name {
            font-size: 0.75rem;
            color: rgba(0, 0, 0, 0.65);
            margin-top: 5px;
        }
    }
    &__nodeday {
        background-color: #ffae3b;
        color: #fff;
        .lunar-text {
            color: #fff;
        }
        &.first {
            border-radius: 3px 0 0 3px;
        }
        &.last {
            border-radius: 0 3px 3px 0;
        }
        &.sensitive-node__day::after {
            content: none;
        }
    }
}
/deep/ .current:last-child .middle::before {
    content: none;
}
.line {
    width: calc(100% + 4rem);
    height: 1px;
    transform: translateX(-2rem);
    background-color: rgba($color: #000000, $alpha: 0.09);
}
.calendar {
    &__header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        color: rgba($color: #000000, $alpha: 0.75);
        span {
            padding: 0 8px;
            cursor: pointer;
            i {
                font-size: 1rem;
                color: rgba($color: #000000, $alpha: 0.55);
            }
        }
    }
}
.lunar-text {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
}
/deep/ .el-calendar-table:not(.is-range) td.next .lunar-text,
/deep/ .el-calendar-table:not(.is-range) td.prev .lunar-text {
    color: rgba(0, 0, 0, 0.25);
}
/deep/ .el-calendar-table td.is-today .lunar-text {
    color: #fff;
}
/deep/ .el-calendar-table td.is-today:hover .lunar-text {
    color: rgba(0, 0, 0, 0.45);
}
/deep/ .dot-box {
    background-color: #f63842;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: -8px;
    top: -8px;
    font-size: 12px;
    color: #fff;
    z-index: 100;
}
/deep/ .el-collapse-item__header {
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    border-bottom: 0;
}
/deep/ .el-collapse-item__wrap,
/deep/ .el-collapse {
    border-bottom: 0;
}
</style>